<script setup>
import { ref, reactive } from "vue"
import { login } from "../../api/index.js"
import {setToken} from "../../utils/auth.js"
import { useRouter } from "vue-router";//导入路由

const router = useRouter();//路由实例化
const ruleFormRef = ref()
const temp = reactive({
    username: "admin",
    password: "123456"
})
const rules = reactive({
    username: [
        { required: true, message: "请输入用户名", trigger: "blur" },
        { min: 3, max: 18, message: "长度在 3 到18 个字符", trigger: "blur" },
    ],
    password: [
        { required: true, message: "请输入密码", trigger: "blur" },
        { min: 6, max: 18, message: "长度在 6 到18 个字符", trigger: "blur" },
    ]
})
//formel就是表单里提交的，名字可以不同
function submitForm(formEl) {
    //if (!formEl) return
 formEl.validate(async valid=> {
    if (valid) {
            let res = await login(temp)
            //解构返回数据 ,模拟登陆
            console.log(res)
            let {code} = res.data
            if(code!=200){
                let {msg} = res.data
                alert(msg)
                return
            }
            // let {msg,token} = res.data.data
            let {msg,token} = res.data
            console.log(msg);
            console.log(token)
            setToken(token)
            
            router.push("/home")
      console.log('submit!',res)
    } else {
      console.log('error submit!')
    }
  })
 }


</script>
<template>
    <div class="login">
        <div class="login-content bg-animation">
            <!-- <div class="bg-animation"></div> -->
            <el-form ref="ruleFormRef" :model="temp" :rules="rules" label-width="120px" class="demo-ruleForm">
                <el-form-item label="用户名：" prop="username">
                    <el-input v-model="temp.username" />
                </el-form-item>
                <el-form-item label="密码：" prop="password">
                    <el-input v-model="temp.password" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm(ruleFormRef)" class="ripple-effect">
                       登陆
                    </el-button>
                  
                </el-form-item>
            </el-form>

        </div>
    </div>
</template>
<style>

body {
  /* margin: 0; */
  /* font-family: 'Roboto', sans-serif; */
  background-color: #0674fa;
}

.login {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  /* background-color: #f2f4f8; */
}

.login-content {
  width: 350px;
  padding: 40px;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  background-color: #2a3597;
  overflow: hidden;
  backdrop-filter: blur(10px); /* 添加磨砂玻璃效果 */
  -webkit-backdrop-filter: blur(10px); /* 对于 Safari 浏览器 */
}

.login-content:before {
  content: '';
  position: absolute;
  top: 0;
  left: -20px;
  width: 40px;
  height: 100%;
  background-image: linear-gradient(to right, #f2f4f8 0%, transparent 100%);
  transform: skewX(-20deg);
}

.demo-ruleForm {
  max-width: 100%;
}

/* 表单元素样式 */
.el-form-item {
  margin-bottom: 24px;
}

.el-form-item label {
  color: #fff;
  font-weight: 500;
  letter-spacing: 0.02em;
  font-size: 14px;
  margin-bottom: ⅛px;
}

.el-input {
  width: 100%;
  height:34px;
  line-height: 34px;
  font-size: 16px;
  color: #3b4151;
  border: none;
  border-bottom: 1px solid #dfe3e8;
  border-radius: 0;
  background-color: transparent;
  transition: border-color 0.2s ease-in-out;
}

.el-input:focus {
  border-color: #6e76ff;
}

/* 输入框聚焦时清除按钮样式 */
.el-input .el-input__clear {
  color: #6e76ff;
}

/* 错误提示信息 */
.el-form-item__error {
  color: #ff5c75;
  font-size: 15px;
  margin-top: 4px;
}

/* 登录按钮样式 */
.el-button[type="primary"] {
  width: 100%;
  height: 52px;
  line-height: 52px;
  font-weight: 600;
  font-size: 16px;
  text-align: center;
  color: #ffffff;
  background-color: #6e76ff;
  border: none;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.3s;
}

.el-button[type="primary"]:hover {
  background-color: #5e67f4;
}

.el-button[type="primary"]:active {
  background-color: #4c54f0;
  outline: none;
}

/* 鼠标悬停时显示波纹效果 */
.ripple-effect {
  position: relative;
  overflow: hidden;
}

.ripple-effect::before,
.ripple-effect::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  border-radius: 50%;
  background-color: rgba(110, 118, 255, 0.3);
  opacity: 1;
  transition: transform 0.3s ease-out, opacity 0.¾s ease-out;
}

.ripple-effect::before {
  width: 200%;
  height: 200%;
}

.ripple-effect::after {
  width: 300%;
  height: 300%;
}

.ripple-effect:hover::before,
.ripple-effect:hover::after {
  transform: translate(-50%, -50%) scale(1);
  opacity: 0;
}

/* 添加背景动画 */
.login-content .bg-animation {
  position: absolute;
  bottom: -40px;
  left: -40px;
  width: calc(100% + 80px);
  height: calc(100% + 80px);
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 100%);
  animation: bgAnimation 10s linear infinite;
}

@keyframes bgAnimation {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(calc(100% + 80px));
  }
}

</style>